/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Divider, Spin, Tabs, Row, Col } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import SupplyQuotation from './SupplyQuotation';
import downloadFile from '@/utils/utils';
import styles from '@/utils/utils.less';

const { Description } = DescriptionList;
const { TabPane } = Tabs;
@connect(({ busicont, loading, publicdata }) => ({
  loading: loading.models.busicont || loading.models.publicdata,
  dictCode: publicdata.dictCode,
  supplyInfo: busicont.supplyInfo, // 供应商合同回显数据
}))
@Form.create()
class Details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 字典列表：服务类型、顺延方式、付款方式、收费规则、客户付款周期、资料收取方式、发票交付类型、发票交付方式、发票方式、发票类型、拆分规则、付款日期选择方式、产品类型、附件类型
      dictList: [
        'SER_TYPE',
        'POS_WAY',
        'PAY_WAY',
        'FEE_RULE',
        'CUST_PAY_PERIOD',
        'SEND_MAT_COLT_WAY',
        'INV_DELV_TYPE',
        'INV_DELV_WAY',
        'INV_CATE',
        'INV_TYPE',
        'SPLIT_RULES',
        'SELECTION_TYPE',
        'PD_CATE',
        'AFFIX_TYPE',
        'CONT_SPOT',
      ],
      contId: null,
      subActiveKey: null,
    };
  }

  componentDidMount() {
    const { dictList } = this.state;
    const { location, dispatch } = this.props;
    const { contId } = queryString.parse(location.search);
    const { activeKey } = queryString.parse(location.search);
    this.setState({ contId, subActiveKey: activeKey });
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: dictList,
    }).then(data => {
      const sortNumber = (a, b) => a.itemCode - b.itemCode;
      dictList.map(dict => {
        this.setState({ [dict]: data[dict].sort(sortNumber) });
      });
      this.getList(contId);
    });
  }

  // 获取数据
  getList = contId => {
    const { dispatch, dictCode } = this.props;
    if (contId) {
      dispatch({
        type: 'busicont/getSuppContDetail',
        payload: {
          contId,
        },
      }).then(response => {
        const supplyInfo = response.data || {};
        dispatch({
          type: 'busicont/matchDictSupplyName',
          payload: {
            supplyInfo,
            dictCode,
          },
        });
      });
    } else {
      router.push('/salemanage/busicont/index?activeKey=2');
    }
  };

  // 切换页签
  changeTabPane = activeKey => {
    this.setState({ subActiveKey: activeKey });
  };

  render() {
    const { contId, subActiveKey } = this.state;
    const { loading, supplyInfo } = this.props;
    return (
      <Spin tip="Loading..." spinning={loading}>
        <PageHeaderWrapper>
          <Card className={styles.tabCard}>
            <Tabs
              activeKey={subActiveKey}
              onChange={this.changeTabPane}
              tabBarExtraContent={
                subActiveKey === '1' ? (
                  <a
                    onClick={() =>
                      router.push(`/salemanage/busicont/supplyhistory?contId=${contId}`)
                    }
                  >
                    历史变更记录
                  </a>
                ) : (
                  <div />
                )
              }
            >
              <TabPane tab="供应商合同信息" key="1">
                <DescriptionList
                  title={
                    <span style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                      供应商合同
                    </span>
                  }
                >
                  <Description term="供应商名称">{supplyInfo.suppName || '--'}</Description>
                  <Description term="合同名称">{supplyInfo.contName || '--'}</Description>
                  <Description term="签约日期">
                    {moment(supplyInfo.signDate).format('YYYY-MM-DD') || '--'}
                  </Description>
                  <Description term="签署部门">{supplyInfo.signDepName || '--'}</Description>
                  <Description term="签署人">{supplyInfo.signName || '--'}</Description>
                  <Description term="合同日期">
                    {moment(supplyInfo.beginDate).format('YYYY-MM-DD') || '--'} ~{' '}
                    {moment(supplyInfo.endDate).format('YYYY-MM-DD') || '--'}
                  </Description>
                  <Description term="顺延方式">
                    {supplyInfo.posWayName} {supplyInfo.posDate ? `${supplyInfo.posDate}月` : ''}
                  </Description>
                  <Description term="所属客服">{supplyInfo.primName || '--'}</Description>
                  <Description term="创建人">{supplyInfo.creName || '--'}</Description>
                  <Description term="创建时间">{moment(supplyInfo.creTime).format('YYYY-MM-DD HH:mm') || '--'}</Description>
                </DescriptionList>
                {/* 合同约定 */}
                <Divider />
                <DescriptionList
                  title={
                    <span style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                      合同约定
                    </span>
                  }
                >
                  <Description term="付款方式">
                    {(supplyInfo.crmCustContConfig && supplyInfo.crmCustContConfig.payWayName) ||
                      '--'}
                  </Description>
                  <Description term="账单交付日">
                    {(supplyInfo.crmCustContConfig && supplyInfo.crmCustContConfig.billDelvDay) ||
                      '--'}
                  </Description>
                  <Description term="发票邮寄周期">
                    {(supplyInfo.crmCustContConfig && supplyInfo.crmCustContConfig.invPeriodName) ||
                      '--'}
                  </Description>
                </DescriptionList>
                {/* 收费设置 */}
                <Divider />
                <DescriptionList
                  title={
                    <span style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                      收费设置
                    </span>
                  }
                >
                  <Description term="社保收费规则">
                    {(supplyInfo.crmCustContConfig &&
                      supplyInfo.crmCustContConfig.insFeeRuleName) ||
                      '--'}
                  </Description>
                  <Description term="公积金收费规则">
                    {(supplyInfo.crmCustContConfig &&
                      supplyInfo.crmCustContConfig.accuFeeRuleName) ||
                      '--'}
                  </Description>
                </DescriptionList>
                {/* 关联客户 */}
                <Divider />
                <DescriptionList
                  title={
                    <span style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                      关联客户
                    </span>
                  }
                >
                  {(supplyInfo.custList &&
                    supplyInfo.custList.length &&
                    supplyInfo.custList.map(item => (
                      <Description key={item.custId}>{item.custName || '--'}</Description>
                    ))) || <Description>暂无数据</Description>}
                </DescriptionList>
                {/* 特殊要求 */}
                <Divider />
                <DescriptionList
                  title={
                    <span style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                      特殊要求
                    </span>
                  }
                >
                  <Description>
                    {(supplyInfo.crmCustContConfig && supplyInfo.crmCustContConfig.speReq) ||
                      '暂无数据'}
                  </Description>
                </DescriptionList>
                {/* 附件 */}
                <Divider />
                <Row
                  style={{
                    marginBottom: 15,
                    fontSize: 14,
                    color: 'rgba(0,0,0,.85)',
                    fontWeight: 'bold',
                  }}
                >
                  附件
                </Row>
                <Row style={{ lineHeight: '30px' }}>
                  {(supplyInfo &&
                    supplyInfo.fileList &&
                    supplyInfo.fileList.length &&
                    supplyInfo.fileList.map(item => (
                      <Col
                        xl={{ span: 8 }}
                        lg={{ span: 8 }}
                        md={{ span: 8 }}
                        sm={24}
                        key={item.contFileId}
                      >
                        <a
                          onClick={e => {
                            e.preventDefault();
                            downloadFile({ fileId: item.fileFileid, fileName: item.fileName });
                          }}
                        >
                          {item.fileName || '--'}
                        </a>
                      </Col>
                    ))) || <Col>暂无数据</Col>}
                </Row>
              </TabPane>
              <TabPane tab="报价单信息" key="2">
                <SupplyQuotation contId={contId} value={subActiveKey} />
              </TabPane>
            </Tabs>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => window.history.back()}>返回</Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </Spin>
    );
  }
}
export default Details;
